<template>
	<div class="content-box">
		<TreeFilter
			title="字典名称"
			ref="dictRef"
			label="label"
			id="value"
			children="children"
			:defaultExpandAll="false"
			:defaultValue="defaultDictValue"
			:data="treeDatas"
			@change="changeDictTreeFilter"
		/>

		<div class="table-box" style="flex: 1; width: 0px">
			<ProTable
				ref="dictTable"
				title="字典列表"
				row-key="id"
				:columns="columns"
				:init-param="initParam"
				:request-api="getDictListApi"
			>
				<!-- 表格Header按钮 -->
				<template #tableHeader>
					<el-button type="primary" :icon="CirclePlus" @click="openDictDialog('新增', {})">新增字典</el-button>
				</template>
				<template #tableHeaderRight>
					<el-button type="primary" :icon="Upload" @click="importIn">添加数据</el-button>
					<el-button type="primary" :icon="Download" @click="exportOut">导出数据</el-button>
				</template>
				<!-- 表格操作 -->
				<template #operation="scope">
					<el-button type="primary" link :icon="View" @click="openDictDialog('查看', scope.row)">查看</el-button>
					<el-button type="primary" link :icon="EditPen" @click="openDictDialog('编辑', scope.row)">编辑</el-button>
					<el-button type="danger" link :icon="Delete" @click="deleteDict(scope.row)">删除</el-button>
				</template>
			</ProTable>
		</div>

		<!-- 弹窗 -->
		<el-dialog v-model="dictVisible" :title="dictTitle" :destroy-on-close="true" width="30%" draggable>
			<el-form label-width="100px" ref="dictFormRef" label-suffix=" :" :model="dictFormModel" :disabled="powerTitle == '查看'">
				<el-form-item v-if="dictTitle != '新增'" label="归属字典">{{ dictFormModel.typeName }} </el-form-item>
				<el-form-item
					v-if="dictTitle == '新增'"
					label="类型标识"
					prop="dictType"
					:rules="[
						{
							required: true,
							message: '请填写类型标识',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dictFormModel.dictType" clearable placeholder="请填写类型标识"></el-input>
				</el-form-item>
				<el-form-item
					v-if="dictTitle == '新增'"
					label="类型名称"
					prop="typeName"
					:rules="[
						{
							required: true,
							message: '请填写类型名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dictFormModel.typeName" clearable placeholder="请填写类型名称"></el-input>
				</el-form-item>
				<el-form-item
					label="字典名称"
					prop="dictName"
					:rules="[
						{
							required: true,
							message: '请填写字典名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dictFormModel.dictName" clearable placeholder="请填写字典名称"></el-input>
				</el-form-item>
				<el-form-item
					label="字典值"
					prop="dictCode"
					:rules="[
						{
							required: true,
							message: '请填写字典值',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dictFormModel.dictCode" clearable placeholder="请填写字典值"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="dictFormModel.dictDesc" placeholder="请填写描述" :rows="4" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input-number
						v-model="dictFormModel.sort"
						placeholder="请填写序号"
						clearable
						controls-position="right"
						:min="1"
					></el-input-number>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dictVisible = false">{{ dictTitle == "查看" ? "关闭" : "取消" }}</el-button>
					<el-button type="primary" @click="handleSubmit" v-if="dictTitle != '查看'">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<ImportExcel ref="importRef" />
	</div>
</template>

<script lang="tsx" setup name="userManage">
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Setting } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { getDictListApi ,getDictTreeApi,saveDictApi,deleteDictApi} from "@/api/modules/test/dict";
import { ElMessage, FormInstance } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { importData, downloadModel, exportData } from "@/api/modules/test/proTable";
import { useDownload } from "@/hooks/useDownload";
import ImportExcel from "@/components/ImportExcel/index.vue";

//-----------------------------------------------------------------------------------
const dictRef = ref();
// 弹窗菜单树默认选项
let defaultDictValue = ref<any>([]);

const dictTable = ref();

const selectDictType = ref("");
const selectTypeName = ref("");

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ value: "" });

// 表单配置项
const columns: ColumnProps[] = [
	{
		type: "index",
		label: "序号",
		width: 150
	},
	{
		prop: "dictType",
		label: "类别标识",
		search: {
			el: "input"
		}
	},
	{
		prop: "typeName",
		label: "类别名称",
		search: {
			el: "input"
		}
	},
	{
		prop: "dictCode",
		label: "字典编码"
	},
	{
		prop: "dictName",
		label: "字典名称",
		search: {
			el: "input"
		}
	},
	{
		prop: "dictDesc",
		label: "字典描述"
	},
	{
		prop: "sort",
		label: "排序"
	},
	{
		prop: "operation",
		label: "操作",
		width: 350,
		fixed: "right"
	}
];

const dictVisible = ref(false);
const dictTitle = ref("");

const dictFormRef = ref<FormInstance>();
const dictFormModel = ref({
	id:"",
	dictType: "",
	typeName: "",
	dictCode:"",
	dictName: "",
	dictDesc: "",
	sort: ""
});

const openDictDialog = async (title: string, row: any = {}) => {
	dictVisible.value = true;
	dictTitle.value = title;

	if (title == "新增") {
		dictFormModel.value = { ...row, dictType: selectDictType.value, typeName: selectTypeName.value };
	} else {
		dictFormModel.value = {...row};
	}
};

// 提交
const handleSubmit = () => {
	dictFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			console.log(dictFormModel.value)
			const data = await saveDictApi({...dictFormModel.value});
			ElMessage.success({ message: data.message });
			dictTable.value.getTableList();
            await getDictDatas();
			dictVisible.value = false;
		} catch (err) {
			console.log(err);
		}
	});
};

// 删除字典
const deleteDict = async (val: any) => {
	await useHandleData(deleteDictApi, { id: val.id }, "删除字典");
	dictTable.value.getTableList();
    await getDictDatas();
};

const changeDictTreeFilter = (val: string,labelName: string) => {
	initParam.value = val;
	selectDictType.value=val;
	selectTypeName.value=labelName;
};

const importRef = ref();
const importIn = () => {
	let params = {
		title: "数据",
		tempApi: downloadModel,
		importApi: importData
	};
	importRef.value.acceptParams(params);
};

const exportOut = () => {
	useDownload(exportData, "导出模板");
};

const treeDatas = ref([]);
// 获取字典树
const getDictDatas = async () => {
	const { result } = await getDictTreeApi({});
	treeDatas.value = [
		{
			value: "",
			label: "根目录",
			children: result
		}
	]
};

// 初始化请求
onMounted(async () => {
	await getDictDatas();
});
</script>
<style lang="scss" scoped>
.content-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	.content-table {
		flex: 1;
		height: 100%;
	}
}
</style>
